<template>
  <div>
    <el-container>
      <el-aside :style="asideStyle">
        <navbar :menus="menus" :collapse="isCollapse"></navbar>
      </el-aside>
      <el-container>
        <el-header>
          <div class="refresh" @click="handleCollapse()">
            <svg
              @click="
                de = true
                go = !go
              "
              t="1626330156421"
              :class="[de == true ? (go ? 'rotate1' : 'rotate') : '']"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="15619"
              width="45"
              height="45"
            >
              <path
                d="M512 832c-17.6 0-32-14.4-32-32V544H224c-17.6 0-32-14.4-32-32s14.4-32 32-32h256V224c0-17.6 14.4-32 32-32s32 14.4 32 32v256h256c17.6 0 32 14.4 32 32s-14.4 32-32 32H544v256c0 17.6-14.4 32-32 32z"
                p-id="15620"
                fill="#85b3ee"
              ></path>
            </svg>
          </div>
          tou
          <div class="dropdown">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ username }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>用户设置</el-dropdown-item>
                <el-dropdown-item>修改头像</el-dropdown-item>
                <el-dropdown-item @click.native="Logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main><router-view></router-view></el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import routes from '../router/routes'
import Navbar from './Navbar'
import { clearToken } from '../utils/auth'
export default {
  components: {
    Navbar,
  },
  data() {
    return {
      isCollapse: false,
      de: false,
      go: false,
      username: '',
    }
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    resolveForMenu(arr, parentPath = '') {
      this.username = localStorage.getItem('username')
      let newArr = []
      arr.forEach((router) => {
        parentPath =
          parentPath && parentPath.lastIndexOf('/') !== parentPath.length - 1
            ? parentPath + '/'
            : parentPath
        let obj = Object.assign({}, router)
        obj.path = parentPath + obj.path
        if (obj.children && obj.children.length > 0) {
          obj.children = this.resolveForMenu(obj.children, obj.path)
        }
        if (obj.meta.hidden) {
          if (obj.children && obj.children.length > 0) {
            obj.children.forEach((item) => {
              let tmp = Object.assign({}, item)
              newArr.push(tmp)
            })
          }
        } else {
          newArr.push(obj)
        }
      })
      return newArr
    },
    Logout() {
      clearToken()
      localStorage.removeItem('username')
      this.$router.push('/login')
    },
  },
  computed: {
    menus() {
      var arr = this.resolveForMenu(routes)
      return arr
    },
    asideStyle() {
      return {
        width: this.isCollapse ? '0px' : '150px',
      }
    },
  },
}
</script>

<style scoped>
body {
  margin: 0px !important;
}
.el-header,
.el-footer {
  background-color: #6aa0e7;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: #333;
}

.el-main {
  background-color: #94b7e5;
  color: #333;
  text-align: center;
  min-height: calc(100vh - 120px);
  padding: 13px;
}

.refresh {
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  margin-top: 5px;
  width: 45px;
  height: 45px;
  float: left;
}

.rotate {
  animation: mymove 0.5s alternate;
}

.rotate1 {
  animation: mymove1 0.5s alternate;
}

@keyframes mymove {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes mymove1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}
navbar {
  color: black !important;
  background-color: white !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #f0f0f0;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.dropdown {
  float: right;
}
</style>
